<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台 - 库存查询</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
  <div class="device-container">
    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="status-bar-left">
        <span class="time">9:41</span>
      </div>
      <div class="status-bar-right">
        <i class="fas fa-signal signal"></i>
        <i class="fas fa-wifi wifi"></i>
        <i class="fas fa-battery-full battery"></i>
      </div>
    </div>

    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left">
        <a href="material.html"><i class="fas fa-arrow-left"></i></a>
      </div>
      <div class="nav-title">库存查询</div>
      <div class="nav-right">
        <i class="fas fa-qrcode"></i>
      </div>
    </div>

    <!-- 应用内容 -->
    <div class="app-content">
      <!-- 搜索栏 -->
      <div class="search-bar mx-4 mt-4">
        <i class="fas fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索物资名称、编号或规格">
      </div>

      <!-- 筛选标签 -->
      <div class="flex overflow-x-auto p-2 mx-2">
        <div class="flex-shrink-0 px-3 py-1 mx-1 rounded-full bg-blue-500 text-white text-sm">全部</div>
        <div class="flex-shrink-0 px-3 py-1 mx-1 rounded-full bg-gray-100 text-gray-600 text-sm">医疗耗材</div>
        <div class="flex-shrink-0 px-3 py-1 mx-1 rounded-full bg-gray-100 text-gray-600 text-sm">办公用品</div>
        <div class="flex-shrink-0 px-3 py-1 mx-1 rounded-full bg-gray-100 text-gray-600 text-sm">防护用品</div>
        <div class="flex-shrink-0 px-3 py-1 mx-1 rounded-full bg-gray-100 text-gray-600 text-sm">清洁用品</div>
        <div class="flex-shrink-0 px-3 py-1 mx-1 rounded-full bg-gray-100 text-gray-600 text-sm">其他物资</div>
      </div>

      <!-- 库存统计 -->
      <div class="grid grid-cols-3 gap-3 p-4">
        <div class="bg-blue-50 rounded-lg p-3 text-center">
          <div class="text-blue-500 text-xl font-bold">1,286</div>
          <div class="text-xs text-gray-500 mt-1">物资种类</div>
        </div>
        <div class="bg-green-50 rounded-lg p-3 text-center">
          <div class="text-green-500 text-xl font-bold">85.2%</div>
          <div class="text-xs text-gray-500 mt-1">库存充足率</div>
        </div>
        <div class="bg-red-50 rounded-lg p-3 text-center">
          <div class="text-red-500 text-xl font-bold">24</div>
          <div class="text-xs text-gray-500 mt-1">库存预警</div>
        </div>
      </div>

      <!-- 库存列表 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>库存列表</span>
          <div class="flex items-center">
            <span class="text-xs text-gray-500 mr-2">排序</span>
            <i class="fas fa-sort-amount-down text-gray-500"></i>
          </div>
        </div>
        <div class="card-body p-0">
          <!-- 物资项 1 -->
          <a href="inventory_detail.html?id=1" class="list-item">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                <i class="fas fa-box text-blue-500"></i>
              </div>
              <div>
                <div class="font-medium">一次性医用口罩</div>
                <div class="text-xs text-gray-500">编号: MS-001 | 规格: 50只/盒</div>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium">12,500盒</div>
              <div class="text-xs text-green-500">库存充足</div>
            </div>
          </a>

          <!-- 物资项 2 -->
          <a href="inventory_detail.html?id=2" class="list-item">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                <i class="fas fa-box text-blue-500"></i>
              </div>
              <div>
                <div class="font-medium">医用手套</div>
                <div class="text-xs text-gray-500">编号: MS-002 | 规格: 100只/盒</div>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium">9,800盒</div>
              <div class="text-xs text-green-500">库存充足</div>
            </div>
          </a>

          <!-- 物资项 3 -->
          <a href="inventory_detail.html?id=3" class="list-item">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                <i class="fas fa-box text-blue-500"></i>
              </div>
              <div>
                <div class="font-medium">一次性注射器</div>
                <div class="text-xs text-gray-500">编号: MS-003 | 规格: 5ml</div>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium">15,600支</div>
              <div class="text-xs text-green-500">库存充足</div>
            </div>
          </a>

          <!-- 物资项 4 -->
          <a href="inventory_detail.html?id=4" class="list-item">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                <i class="fas fa-box text-blue-500"></i>
              </div>
              <div>
                <div class="font-medium">医用酒精</div>
                <div class="text-xs text-gray-500">编号: MS-004 | 规格: 500ml/瓶</div>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium">1,290瓶</div>
              <div class="text-xs text-green-500">库存充足</div>
            </div>
          </a>

          <!-- 物资项 5 -->
          <a href="inventory_detail.html?id=5" class="list-item">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                <i class="fas fa-box text-blue-500"></i>
              </div>
              <div>
                <div class="font-medium">输液器</div>
                <div class="text-xs text-gray-500">编号: MS-005 | 规格: 一次性</div>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium">8,640套</div>
              <div class="text-xs text-green-500">库存充足</div>
            </div>
          </a>

          <!-- 物资项 6 -->
          <a href="inventory_detail.html?id=6" class="list-item">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                <i class="fas fa-box text-blue-500"></i>
              </div>
              <div>
                <div class="font-medium">医用纱布</div>
                <div class="text-xs text-gray-500">编号: MS-006 | 规格: 7.5cm×7.5cm</div>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium">5,200包</div>
              <div class="text-xs text-green-500">库存充足</div>
            </div>
          </a>

          <!-- 物资项 7 -->
          <a href="inventory_detail.html?id=7" class="list-item">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                <i class="fas fa-box text-blue-500"></i>
              </div>
              <div>
                <div class="font-medium">医用棉签</div>
                <div class="text-xs text-gray-500">编号: MS-007 | 规格: 100支/盒</div>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium">3,450盒</div>
              <div class="text-xs text-orange-500">库存偏低</div>
            </div>
          </a>

          <!-- 物资项 8 -->
          <a href="inventory_detail.html?id=8" class="list-item">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                <i class="fas fa-box text-blue-500"></i>
              </div>
              <div>
                <div class="font-medium">一次性防护服</div>
                <div class="text-xs text-gray-500">编号: MS-008 | 规格: XL</div>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium">850套</div>
              <div class="text-xs text-red-500">库存预警</div>
            </div>
          </a>
        </div>
      </div>

      <!-- 库存预警 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>库存预警</span>
          <div class="text-xs text-blue-500">查看全部</div>
        </div>
        <div class="card-body p-0">
          <div class="list-item">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mr-3">
                <i class="fas fa-exclamation-triangle text-red-500"></i>
              </div>
              <div>
                <div class="font-medium">一次性防护服</div>
                <div class="text-xs text-gray-500">库存低于安全库存量</div>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium text-red-500">850套</div>
              <div class="text-xs text-gray-500">安全库存: 1000套</div>
            </div>
          </div>
          <div class="list-item">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mr-3">
                <i class="fas fa-exclamation-triangle text-red-500"></i>
              </div>
              <div>
                <div class="font-medium">N95口罩</div>
                <div class="text-xs text-gray-500">库存低于安全库存量</div>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium text-red-500">320盒</div>
              <div class="text-xs text-gray-500">安全库存: 500盒</div>
            </div>
          </div>
          <div class="list-item">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center mr-3">
                <i class="fas fa-exclamation-circle text-orange-500"></i>
              </div>
              <div>
                <div class="font-medium">医用棉签</div>
                <div class="text-xs text-gray-500">库存接近安全库存量</div>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium text-orange-500">3,450盒</div>
              <div class="text-xs text-gray-500">安全库存: 3,000盒</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 快捷操作 -->
      <div class="flex justify-around mx-4 mb-4">
        <a href="material_apply.html" class="flex flex-col items-center">
          <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-1">
            <i class="fas fa-file-alt text-blue-500"></i>
          </div>
          <span class="text-xs">物资申请</span>
        </a>
        <a href="#" class="flex flex-col items-center">
          <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-1">
            <i class="fas fa-exchange-alt text-green-500"></i>
          </div>
          <span class="text-xs">物资调拨</span>
        </a>
        <a href="#" class="flex flex-col items-center">
          <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-1">
            <i class="fas fa-clipboard-check text-purple-500"></i>
          </div>
          <span class="text-xs">物资盘点</span>
        </a>
        <a href="#" class="flex flex-col items-center">
          <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center mb-1">
            <i class="fas fa-chart-bar text-orange-500"></i>
          </div>
          <span class="text-xs">库存分析</span>
        </a>
      </div>
    </div>

    <!-- 底部标签栏 -->
    <div class="tab-bar">
      <a href="home.html" class="tab-item">
        <i class="fas fa-home tab-icon"></i>
        <span>首页</span>
      </a>
      <a href="asset.html" class="tab-item">
        <i class="fas fa-laptop tab-icon"></i>
        <span>资产</span>
      </a>
      <a href="finance.html" class="tab-item">
        <i class="fas fa-wallet tab-icon"></i>
        <span>财务</span>
      </a>
      <a href="material.html" class="tab-item active">
        <i class="fas fa-box tab-icon"></i>
        <span>物资</span>
      </a>
      <a href="profile.html" class="tab-item">
        <i class="fas fa-user tab-icon"></i>
        <span>我的</span>
      </a>
    </div>
  </div>

  <script>
    // 定义物资数据
    const inventoryData = [
      { id: 1, name: '一次性医用口罩', spec: '50只/盒', stock: 12500, unit: '盒', category: '医疗耗材', status: '库存充足' },
      { id: 2, name: '医用手套', spec: '100只/盒', stock: 9800, unit: '盒', category: '医疗耗材', status: '库存充足' },
      { id: 3, name: '一次性注射器', spec: '5ml', stock: 15600, unit: '支', category: '医疗耗材', status: '库存充足' },
      { id: 4, name: '医用酒精', spec: '500ml/瓶', stock: 1290, unit: '瓶', category: '医疗耗材', status: '库存充足' },
      { id: 5, name: '输液器', spec: '一次性', stock: 8640, unit: '套', category: '医疗耗材', status: '库存充足' },
      { id: 6, name: '医用纱布', spec: '7.5cm×7.5cm', stock: 5200, unit: '包', category: '医疗耗材', status: '库存充足' },
      { id: 7, name: '医用棉签', spec: '100支/盒', stock: 3450, unit: '盒', category: '医疗耗材', status: '库存偏低' },
      { id: 8, name: '一次性防护服', spec: 'XL', stock: 850, unit: '套', category: '防护用品', status: '库存预警' },
      { id: 9, name: 'N95口罩', spec: '10只/盒', stock: 320, unit: '盒', category: '防护用品', status: '库存预警' },
      { id: 10, name: 'A4打印纸', spec: '500张/包', stock: 230, unit: '包', category: '办公用品', status: '库存充足' },
      { id: 11, name: '圆珠笔', spec: '0.5mm', stock: 560, unit: '支', category: '办公用品', status: '库存充足' },
      { id: 12, name: '消毒液', spec: '1L/瓶', stock: 420, unit: '瓶', category: '清洁用品', status: '库存充足' },
      { id: 13, name: '洗手液', spec: '500ml/瓶', stock: 380, unit: '瓶', category: '清洁用品', status: '库存充足' },
      { id: 14, name: '医疗废物袋', spec: '大号', stock: 1200, unit: '个', category: '其他物资', status: '库存充足' }
    ];

    // 获取筛选标签和库存列表元素
    const filterTags = document.querySelectorAll('.flex.overflow-x-auto.p-2.mx-2 > div');
    const inventoryList = document.querySelector('.card-body.p-0');
    const searchInput = document.querySelector('.search-input');

    // 为筛选标签添加点击事件
    filterTags.forEach(tag => {
      tag.addEventListener('click', function() {
        // 移除所有标签的活动状态
        filterTags.forEach(t => {
          t.classList.remove('bg-blue-500', 'text-white');
          t.classList.add('bg-gray-100', 'text-gray-600');
        });
        
        // 设置当前标签为活动状态
        this.classList.remove('bg-gray-100', 'text-gray-600');
        this.classList.add('bg-blue-500', 'text-white');
        
        // 获取当前标签文本并筛选物资
        const category = this.textContent.trim();
        filterInventory(category);
      });
    });

    // 为搜索框添加输入事件
    searchInput.addEventListener('input', function() {
      const keyword = this.value.toLowerCase().trim();
      const activeCategory = document.querySelector('.flex.overflow-x-auto.p-2.mx-2 > div.bg-blue-500').textContent.trim();
      
      // 同时考虑关键词和当前选中的分类
      filterInventory(activeCategory, keyword);
    });

    // 筛选物资函数
    function filterInventory(category, keyword = '') {
      // 根据分类和关键词筛选物资
      let filteredItems;
      
      if (category === '全部') {
        filteredItems = inventoryData;
      } else {
        filteredItems = inventoryData.filter(item => item.category === category);
      }
      
      // 如果有关键词，进一步筛选
      if (keyword) {
        filteredItems = filteredItems.filter(item => 
          item.name.toLowerCase().includes(keyword) || 
          item.spec.toLowerCase().includes(keyword) ||
          ('编号: MS-' + String(item.id).padStart(3, '0')).toLowerCase().includes(keyword)
        );
      }
      
      // 更新库存列表显示
      updateInventoryList(filteredItems);
    }

    // 更新库存列表显示函数
    function updateInventoryList(items) {
      // 清空当前列表
      inventoryList.innerHTML = '';
      
      // 如果没有匹配项
      if (items.length === 0) {
        inventoryList.innerHTML = '<div class="p-4 text-center text-gray-500">没有找到匹配的物资</div>';
        return;
      }
      
      // 添加筛选后的物资项
      items.forEach(item => {
        const statusClass = item.status === '库存充足' ? 'text-green-500' : 
                          item.status === '库存偏低' ? 'text-orange-500' : 'text-red-500';
        
        const itemHtml = `
          <a href="inventory_detail.html?id=${item.id}" class="list-item">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                <i class="fas fa-box text-blue-500"></i>
              </div>
              <div>
                <div class="font-medium">${item.name}</div>
                <div class="text-xs text-gray-500">编号: MS-${String(item.id).padStart(3, '0')} | 规格: ${item.spec}</div>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium">${item.stock}${item.unit}</div>
              <div class="text-xs ${statusClass}">${item.status}</div>
            </div>
          </a>
        `;
        
        inventoryList.innerHTML += itemHtml;
      });
    }

    // 初始加载全部物资
    filterInventory('全部');
  </script>

  <style>
    /* 筛选标签样式 */
    .flex.overflow-x-auto.p-2.mx-2 > div {
      cursor: pointer;
      transition: all 0.3s ease;
    }
  </style>
</body>
</html>